<template>
  <div>
    <div class="head">
      <el-form inline :model="selectdata"
               label-width="150px"
               size="small"
      >


        <el-form-item>
          <el-input v-model="selectdata.nickname" @keyup.enter.native="search"
                    placeholder="请输入管理员昵称">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-delete" type="danger" @click="clearForm">重置</el-button>
          <el-button plain type="primary" @click="search" icon="el-icon-search">搜索</el-button>
        </el-form-item>
      </el-form>

      <!--            <div>-->
      <!--                &lt;!&ndash; 新增 &ndash;&gt;-->
      <!--                <el-button size="small" plain type="primary" icon="el-icon-plus" @click="openDialog('add')">新增<i-->
      <!--                        class="el-icon&#45;&#45;right"></i>-->
      <!--                </el-button>-->
      <!--            </div>-->


    </div>


    <div>
      <!-- 表 -->
      <el-table :data="tableData" border v-loading="loading">
        <el-table-column label="ID" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>


        <el-table-column label="用户昵称" align="center">
          <template slot-scope="scope">{{ scope.row.nickname }}</template>
        </el-table-column>


        <el-table-column label="头像" align="center" prop="avatar">
          <template slot-scope="scope">
            <el-image :src="scope.row.avatar" v-if="scope.row.avatar" class="img-wrap"
                      style="height: 50px;width: 100%"
                      :preview-src-list="scope.row.avatar |toArray"></el-image>
          </template>
        </el-table-column>


        <el-table-column label="评论内容" align="center">
          <template slot-scope="scope">{{ scope.row.content }}</template>
        </el-table-column>

        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>


      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>


  </div>
</template>

<script>
import moment from 'moment'
import {comment_list} from '@/api/comment'

export default {
  name: "sys_user",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      dateRange: [],
      loading: false,
      formInline: {},
      selectdata: {
        userId: "",
        nickname: "",

      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    /**
     * 重置搜索
     */
    clearForm() {
      this.selectdata = {};
      this.getData();
    },

    openDialog(type, val) {
      if (type === 'add') {
        this.form = {};
        this.open = true;
        this.type = "add";
        this.title = "新增用户"

      } else {
        this.type = "edit";
        this.title = "修改用户";
        let params = {};
        params.id = val;
        detail(params).then(res => {
          if (res.status === 200) {
            this.open = true;
            this.form = res.data;
          }
        })
      }
    },

    /**
     * 搜索
     */
    search() {
      this.currentPage = 1;
      this.getData()
    },


    /**
     * 获取数据
     */
    getData() {
      let params = {};
      this.loading = true;
      params.pageSize = this.pageSize;
      params.pageNumber = this.currentPage;
      comment_list(params).then(res => {
        if (res.status === 200) {
          this.loading = false;
          this.total = Number.parseInt(res.data.total);
          this.tableData = res.data.list;
        }

      })
    },
    /**
     * 改变每页大小
     */
    handleSizeChange(e) {
      this.pageSize = e;
      this.getData();
    },
    /**
     * 改变当前页
     */
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getData();
    },
  },
  filters: {
    filterCtime(ctime) {
      // 过滤时间
      if (ctime) {
        return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return '暂无数据'
      }
    },
    filterShow(show) {
      if (show === 1) {
        return '显示'
      } else {
        return '不显示'
      }
    }
  }
}
</script>

<style scoped>

</style>
